import React from 'react';
import { Card, Table, Modal, message, Button} from 'antd';
import './index.less';
import axios from './../../axios/index';
import Utils from './../../utils/utils';

export default class BasicTable extends React.Component{
    state = {
        dataSource: []
       
    }
    params = {
        page: 1
    }
    componentDidMount() {
        const data = [
            {
                id:'0',
                userName:'jack',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'哈尔滨秋林',
                time:'09:00'
            },
            {
                id:'1',
                userName:'jack',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'哈尔滨秋林',
                time:'09:00'
            },
            {
                id:'2',
                userName:'jack',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'哈尔滨秋林',
                time:'09:00'
            },
            {
                id:'3',
                userName:'jack',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'哈尔滨秋林',
                time:'09:00'
            }
        ]
        data.map((value,index) => {
            value.key = index
        })
        this.setState({
            dataSource: data
        })
        this.request();
    }
    //动态获取mock数据
    request = () => {
        let _this = this;
       axios.ajax({
           url:'/table/list',
           data:{
               params:{
                   page:this.params.page
               },
                isShowLoading:false
           }
       }).then((res) => { 
        //    console.log("1",res.result)
           res.result.list.map((item, index) => {
            item.key = index;
        })

           if(res.code =="0") {
               this.setState({
                   dataSource2:res.result.list,
                   selectedRowKeys:[],
                   selectedRow: null,
                   pagination:Utils.pagination(res,(current) => {
                    _this.params.page = current;
                    this.request();
                   })
               })
           }
       })
        
    }
    onRowClick =(record,index) => {
        console.log(record)
        let selectKey = [index];
        Modal.info({
            title:"xinxi",
            content:`yhm:${record.userName}`
        })
        this.setState({
            selectedRowKeys:selectKey,
            selectedItem:record
        })
    }

    //删除
    handleDelete = () => {
        let rows = this.state.selectedRow;
        let ids = [];
        rows.map((item) => {
            ids.push(item.id)
        })
        Modal.confirm({
            title:"删除提示",
            content:`您确定删除这些数据吗? ${ids.join(',')}`,
            onOk:() => {
                message.success("删除成功");
                this.request()
            }
        })
    }
    render() {
        const columns = [
            {
              title:'id',
              dataIndex:'id'  
            },
            {
                title:'用户名',
                dataIndex:'userName'  
              }
              ,
            {
                title:'性别',
                dataIndex:'sex' ,
                render(sex) {
                    return sex == 1 ? "男" : "女"
                } 
              }
              ,
            {
                title:'状态',
                dataIndex:'state',
                render(state ) {
                    let config = {
                        "1":"咸鱼一条",
                        "2":"鲤鱼打挺",
                        "3":"风花雪月",
                        "4":"雪中送炭",
                        "5":"干就完了"
                    }
                    return config[state]
                }  
              }
              ,
            {
                title:'爱好',
                dataIndex:'interest',
                render(interest ) {
                    let config = {
                        "1":"打球",
                        "2":"游泳",
                        "3":"健身",
                        "4":"路铁",
                        "5":"干"
                    }
                    return config[interest]
                }   
              }
              ,
            {
                title:'生日',
                dataIndex:'birthday'  
              }
              ,
            {
                title:'地址',
                dataIndex:'address'  
              }
              ,
            {
                title:'早起时间',
                dataIndex:'time'  
              }
        ]
        // const selectedRowKeys = this.state.selectedRowKeys
        const { selectedRowKeys} = this.state;
        const rowSelection = {
            type:'radio',
            selectedRowKeys
        }
        const rowCheckSelection = {
            type:'checkbox',
            selectedRowKeys,
            //selectedRowKeys选中哪一行
            //selectedRow选中行的对象列出来
            onChange: (selectedRowKeys,selectedRow) => {
               
                this.setState({
                    selectedRowKeys,
                  
                    selectedRow
                })
            }
        }
        return (
            <div>
                <Card title="基础表格" className="card-wrap">
                    <Table 
                    bordered
                        columns = {columns}
                        dataSource = {this.state.dataSource}
                        pagination={false}
                    />
                    
                </Card>

                <Card title="动态数据渲染表格-Mock" className='card-wrap'>
                    <Table 
                    bordered
                        columns = {columns}
                        dataSource = {this.state.dataSource2}
                        pagination={false}
                    />
                    
                </Card>


                <Card title="Mock-单选" className='card-wrap'>
                <div>
                        <Button onClick={this.handleDelete}>删除</Button>
                    </div>
                    <Table 
                        bordered
                        onRow={(record,index) => {
                            return {
                                onClick:() => {
                                    this.onRowClick(record,index)
                                }
                               
                                
                            }
                        }}
                        rowSelection={rowSelection}
                        columns = {columns}
                        dataSource = {this.state.dataSource2}
                        pagination={false}
                    />
                    
                </Card>

                <Card title="Mock-单选 Checkbox" className='card-wrap'>
                <div>
                        <Button onClick={this.handleDelete}>删除</Button>
                    </div>
                    <Table 
                        bordered
                        rowSelection={rowCheckSelection}
                        columns = {columns}
                        dataSource = {this.state.dataSource2}
                        pagination={false}
                    />
                    
                </Card>

                <Card title="Mock-单选分页" className='card-wrap'>
                
                    <Table 
                        bordered
                        columns = {columns}
                        dataSource = {this.state.dataSource2}
                        pagination={this.state.pagination}
                    />
                    
                </Card>
            </div>
        )
    }
  
}